<template>
    <view class="agree-row flex flex-nowrap items-center py-20rpx" @click="setArgeeValue">
        <img v-show="!isAgree" :src="checkIcon" style="width: 28rpx; height: 28rpx" alt="" />
        <img v-show="isAgree" :src="checkedIcon" style="width: 28rpx; height: 28rpx" alt="" />
        <view class="flex flex-nowrap items-center ml-24rpx">我已阅读并同意 <view class="argee-btn">《用户协议》</view>
            <view class="argee-btn">《隐私协议》</view>
        </view>
    </view>
</template>
<script lang='ts' setup>
import { ref } from 'vue'
import checkIcon from '@/static/icon/login/check.png'
import checkedIcon from '@/static/icon/login/checked.png'
const isAgree = ref(false)
const emit = defineEmits(['change']);

function setArgeeValue() {
    isAgree.value = !isAgree.value;
    emit('change', isAgree.value)
}
</script>
<style lang="scss" scoped>
.agree-row {
    color: var(--wot-color-text);
    font-size: 24rpx;
    font-weight: 500;
    .argee-btn {
        color: var(--wot-color-theme);
    }
}
</style>